<script setup lang="ts">
import DataLeavesColorAnalyze from '@/components/analyze/DataLeavesColorAnalyze.vue'
import DataMaturityRateAnalyze from '@/components/analyze/DataMaturityRateAnalyze.vue'
import DataTemperatureAnalyze from '@/components/analyze/DataTemperatureAnalyze.vue'
import DataIlluminationAnalyze from '@/components/analyze/DataIlluminationAnalyze.vue'
import DataWaterContentAnalyze from '@/components/analyze/DataWaterContentAnalyze.vue'
import DataSoilAnalyze from '@/components/analyze/DataSoilAnalyze.vue'
import { onMounted, ref } from 'vue'
import { getSensorData } from '@/api/environmentalDataController.ts'
import { useEnvironmentDataStore } from '@/stores/useEnvironmentDataStore.ts'
import { ExclamationOutlined } from '@ant-design/icons-vue'
const environmentDataStore = useEnvironmentDataStore()

// 导电率
const conductivity = ref<number>()
const conductivityList: number[] = []
// 氮
const nitrogen = ref<number>()
const nitrogenList: number[] = []
// 磷
const phosphorus = ref<number>()
const phosphorusList: number[] = []
// 钾
const potassium = ref<number>()
const potassiumList: number[] = []

const fetchSensorData = async () => {
  const res = await getSensorData()
  conductivity.value = res.data.data?.conductivity
  conductivityList.push(conductivity.value ?? -1)
  environmentDataStore.setConductivity(conductivityList)

  nitrogen.value = res.data.data?.nitrogen
  nitrogenList.push(res.data.data?.nitrogen ?? -1)
  environmentDataStore.setNitrogen(nitrogenList)

  phosphorus.value = res.data.data?.phosphorus
  phosphorusList.push(res.data.data?.phosphorus ?? -1)
  environmentDataStore.setPhosphorus(phosphorusList)

  potassium.value = res.data.data?.potassium
  potassiumList.push(res.data.data?.potassium ?? -1)
  environmentDataStore.setPotassium(potassiumList)
}

onMounted(() => {
  fetchSensorData()
})
</script>

<template>
  <div id="data-summary-analyze-page">
    <a-flex gap="middle">
      <a-card title="电导率（%）" style="width: 50%">
        <div style="height: 160px; text-align: center">
          <a-progress type="dashboard" :percent="conductivity" />
        </div>
      </a-card>
      <a-card title="氮（mg/L）" style="width: 50%">
        <div style="height: 160px; text-align: center">
          <a-progress
            type="dashboard"
            :percent="nitrogen"
            :format="(percent: number) => `${percent}mg/L`"
          />
        </div>
      </a-card>
      <a-card title="磷（mg/L）" style="width: 50%">
        <div style="height: 160px; text-align: center">
          <a-progress
            type="dashboard"
            :percent="phosphorus"
            :format="(percent: number) => `${percent}mg/L`"
          />
        </div>
      </a-card>
      <a-card title="钾（mg/L）" style="width: 50%">
        <div style="height: 160px; text-align: center">
          <a-progress
            type="dashboard"
            :percent="potassium"
            :format="(percent: number) => `${percent}mg/L`"
          />
        </div>
      </a-card>
    </a-flex>
    <DataMaturityRateAnalyze />
    <DataLeavesColorAnalyze />
    <DataTemperatureAnalyze />
    <!-- TODO-->
    <!-- <DataIlluminationAnalyze />-->
    <DataWaterContentAnalyze />
    <DataSoilAnalyze />
  </div>
</template>

<style scoped>
#data-summary-analyze-page {
  width: 100%;
}
</style>
